<script lang="tsx" setup>
import { computed, toRef } from 'vue'

import {
  modulationModeName,
  modulationModeOptions,
  useDecodeTable
} from './composables/useDecodeTable'
import BitStreamTag from './BitStreamTag.vue'

import type { CellSlotProps } from './composables/useDecodeTable'
import { useDecodeTableForm } from './composables/useDecodeTableForm'
import type { MimoContent, MimoDecodeArgs } from '@/apis/lab'

const props = defineProps<{
  reportID: number
  decodeContent?: MimoContent['decode']
  isDecoding: boolean
}>()

const {
  record: formState,
  cancel,
  toggleRecord,
  handleSubmit
} = useDecodeTableForm(toRef(props, 'reportID'))
/** 给没有的实验编号设置默认值 */
const mergedDecodeContent = computed(() => ({
  ...Object.fromEntries(
    Array.from({ length: 10 })
      .fill(0)
      .map<[number, MimoContent['decode']]>((_, index) => [
        index + 1,
        {
          args: {
            receiveAntennas: 2,
            modulationMode: 1,
            bitStream: 0,
            noiseRate: 0
          } as MimoDecodeArgs,
          result: -1
        }
      ])
  ),
  ...props.decodeContent
}))
const { columns, data } = useDecodeTable(
  mergedDecodeContent,
  computed(() => formState.value.index.toString())
)
</script>

<template>
  <div class="card px-0 pb-0">
    <ExperimentTitle
      class="px-xs"
      title="解码实验"
      icon="i-fluent-water-32-filled"
      :status="isDecoding ? 'running' : 'resolved'"
    />

    <a-table size="small" :pagination="false" :bordered="false" :columns="columns" :data>
      <template #th>
        <th class="arco-table-thead border-t-none" />
      </template>
      <template #transmitAntennas>2</template>
      <template #receiveAntennas="{ record: { receiveAntennas, editable } }: CellSlotProps">
        <span v-show="!editable">{{ receiveAntennas }}</span>

        <a-input-number
          v-show="editable"
          v-model="formState.receiveAntennas"
          size="mini"
          :min="1"
          :max="8"
          style="width: 4rem"
        />
      </template>
      <template #modulationMode="{ record: { modulationMode, editable } }: CellSlotProps">
        <a-typography-text v-show="!editable" code>
          {{ modulationModeName[modulationMode] }}
        </a-typography-text>

        <a-select
          v-model="formState.modulationMode"
          size="mini"
          :style="{ width: '5.5rem', display: editable ? 'inline-flex' : 'none' }"
          :options="modulationModeOptions"
        />
      </template>
      <template #noiseRate="{ record: { noiseRate, editable } }: CellSlotProps">
        <span v-show="!editable" class="after:content-['_dB'] font-italic">
          {{ noiseRate.toFixed(2) }}
        </span>

        <a-input-number
          v-show="editable"
          v-model="formState.noiseRate"
          size="mini"
          :min="-10"
          :max="20"
          :step="0.01"
          style="width: 5rem"
        />
      </template>
      <template #bitStream="{ record: { bitStream, editable } }: CellSlotProps">
        <a-typography-text v-show="!editable" code>{{ bitStream }}</a-typography-text>

        <a-verification-code
          v-show="editable"
          v-model="formState.bitStream"
          size="mini"
          :length="4"
          :formatter="(bit: string) => ('01'.includes(bit) ? bit : false)"
          style="width: 100px; margin-left: auto; margin-right: auto"
        />
      </template>
      <template #result="{ record: { result, status } }: CellSlotProps">
        <BitStreamTag :status :code="result" />
      </template>
      <template #edit="{ record }: CellSlotProps">
        <a-button
          v-show="!record.editable"
          :disabled="isDecoding"
          size="mini"
          status="success"
          type="dashed"
          @click="toggleRecord(record)"
        >
          <template #icon><i class="i-fluent-edit-settings-24-filled" /></template>
        </a-button>

        <a-button-group v-show="record.editable" :disabled="isDecoding" size="mini" type="dashed">
          <a-button status="success" @click="handleSubmit">
            <template #icon><i class="i-fluent-save-24-filled" /></template>
          </a-button>
          <a-button status="danger" @click="cancel">
            <template #icon><i class="i-fluent-eraser-segment-24-filled" /></template>
          </a-button>
        </a-button-group>
      </template>
    </a-table>
  </div>
</template>
